<!doctype html>
<html>

	<head>
		<<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			.fixed-bottom{
				position: fixed;
				left: 0;
				right: 0;
				bottom:0;
				background-color: white;
				box-shadow: -2px 0px 2px rgba(0,0,0,0.2);
				transition: 0.3s;
			}
			#card-tpl-menu-bar{
				height: 45px;
				padding: 5px;
				z-index: 10;
			}
			#card-tpl-menu-bar .mui-btn,#card-tpl-menu-bar .mui-icon{
			   font-size: 15px;
			}
			#card-create-content{
				padding: 10px;
				overflow-x: auto;
			}
			#tpl-sel-list-content{
				/* height: 350px; */
				padding: 5px;
				bottom:-450px;
				z-index: 9;
				overflow-y: auto;
			}
			#tpl-sel-list-content .mui-media-body{
				font-size: 12px;
			}
			.mui-bar-nav ~ .mui-content {
				background-color: white;
			    padding-top: 20px;
			}
			.tpl-sel-item img{
				object-fit: contain;
				height: 100px;
				width: 100%;
			}
			.xq-select-grid{
				box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
			}
			.xq-select-grid .mui-media-body{
				font-weight: bold;
			}
			#tpl-content-setting{
				z-index: 15;
				height: 530px;
				bottom: -530px;
			}
			#tpl-content-setting ul{
				margin: 0;
				padding: 10px;
				
			}
			#tpl-content-setting li{
				list-style: none;
				padding: 0;
				margin-top: 10px;
			}
			#tpl-content-setting li {
				text-align: center;
			}
			#tpl-content-setting li img{
				width: 210px;
				height: 150px;
				border: 1px solid lightgray;
			}
			#tpl-content-setting li label{
				width: 20%;
				float: left;
				font-weight: bold;
				line-height: 23px;
			}
			#tpl-content-setting li input{
				border: none;
				width: 80%;
				float: right;
				border-bottom:1px solid lightgray ;
			}
			#tpl-content-setting li textarea{
				border-radius: 0px;
				border-color: lightgray;
			}
			#tpl-content-setting li .mui-btn{
				width: 100%;
				height: 40px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav xq-window-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">卡片制作</h1>
		</header>
		<div class="mui-content">
			<div id="card-create-content">

			</div>
			<div id="card-tpl-menu-bar" class="fixed-bottom">
				<span class="mui-btn mui-btn-link" fun-edit><a class="mui-icon mui-icon-compose"></a> 编辑</span>
				<span class="mui-btn mui-btn-link" fun-to-sel-tpl><a class="mui-icon mui-icon-list"></a> 模板列表</span>
				<span class="mui-btn mui-btn-link" fun-save-card><a class="mui-icon mui-icon-download"></a> 存入相册</span>
			</div>
		</div>
		<div style="display: none;" id="tpl-content">
			
		</div>
		<!--模板选区-->
		<div id="tpl-sel-list-content" class="fixed-bottom">
			<ul class="mui-table-view mui-grid-view mui-grid-9" >
			</ul>
		</div>
		<!--模板内容设置-->
		<div id="tpl-content-setting" class="fixed-bottom">
			<ul>
				<li><img edit-ele :src="tplData.img"></li>
				<li><label>标题</label>
					<input v-model="tplData.title" class="mui-input-clear" placeholder="请输入标题">
					<div class="xq-clean-both"></div>
				</li>
				<li><label>作者</label>
					<input v-model="tplData.writer" class="mui-input-clear" placeholder="请输入作者">
					<div class="xq-clean-both"></div>
				</li>
				<li><textarea v-model="tplData.contentText" rows="7"  placeholder="请输入内容"></textarea></li>
				<li class="mui-row">
					<div class="mui-col-xs-6 mui-col-sm-6 xq-padding-content">  
						<button class="mui-btn mui-btn-blue confirm">确定</button>
					</div>  
					<div class="mui-col-xs-6 mui-col-sm-6 xq-padding-content">  
						<button class="mui-btn mui-btn-red cancel">取消</button>
					</div>  
				</li>
			</ul>
			<div style="display: none;">
				<input file-input type="file" accept="image/*">
			</div>
		</div>
	
		<script src="../js/mui.js"></script>
		<script src="../js/vue-2.3.3.js"></script>
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/html2canvas.js"></script>
		<script src="../js/commonUtils.js"></script>
		<script src="../js/cardMakePageManager.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.ready(function(){
				if(mui.os.plus){
					return;
				}
				initCardMakder();
			});
			mui.plusReady(function () {
				var self = plus.webview.currentWebview();
				var cardContent = self.cardContent;//获得参数
				handleTextAreaLines(cardContent);
				console.log('cardContent:'+JSON.stringify(cardContent))
			    initCardMakder(cardContent);
			});
			
			function initCardMakder(cardContent){
				//SettingInfoManager.timeCheckAndSetPageFontFromSetting("cardMaker");
				var config={VMConfig:{data:{tplData:{}}}};
				config.VMConfig.data.tplData=cardContent;
				SettingInfoManager.setPageFontFromSetting();
				var cardMakePageManager=new CardMakePageManager();
				cardMakePageManager.init(config);
				initEleSize();
				//initEventListener();
			}
			
			function initEleSize(){
				var winW=$(window).width();
				var winH=$(window).height();
				var createH=winH-84;
				$("#card-create-content").css('height',createH+'px');
				$("#mui-content").css('width',winW+'px');
			}
			
			function handleTextAreaLines(cardContent){
				if(cardContent && cardContent.contentText){
					cardContent.contentText=cardContent.contentText.replace(/<br*\/?>/gi,'\n');
				}
			}
		</script>
	</body>

</html>
